<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <el-button type="primary" @click="router.push('/menus/create')">添加菜单</el-button>
            </div>
        </template>
        <div class="big-box">
            <el-table :data="allMenus" border style="width: 100%">
                <el-table-column label="序号" width="180" type="index" align="center" />
                <el-table-column prop="name" label="菜单名称" width="180" align="center" />
                <el-table-column prop="level" label="菜单层级" width="180" align="center" />
                <el-table-column prop="icon" label="菜单图标" width="180" align="center" />
                <el-table-column prop="orderNum" label="排序" width="180" align="center" />
                <el-table-column label="操作" width="305" align="center" v-slot="scope">
                    <el-button type="primary"
                        @click="router.push({ name: 'menus-edit', params: { id: scope.row.id } })">编辑菜单</el-button>
                    <el-button type="danger" @click="handleDelete(scope.row.id)">删除菜单</el-button>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { useMenus } from '@/composables/useMenus'  //导入响应式数据
const { allMenus, getAllMenus, handleDelete } = useMenus() //调用后，解构得到想要的东西
getAllMenus()

import { useRouter } from 'vue-router'
const router = useRouter()
</script>

<style scoped>
.box-card {
    width: auto;
}

.big-box {
    height: 495px;
    overflow-y: auto;
}
</style>